<template>
	<view class="order_assess_success_page">
		<!-- 返回首页 -->
		<view class="page_head">
			<view class="t">
				<icon type="success" size="22" color='#fff' />评价成功
			</view>
			<view class="m">
				坚持写真实、内容丰富的评价，获得更高积分
			</view>
			<view class="b" @click="backHome">
				返回首页
			</view>
		</view>
		<!-- 领取积分 -->
		<view class="page_bottom">
			<view class="integral">
				<image src="https://www.innovationgloble.com/wxs/img/wx/assess-integral.png" mode="widthFix"></image>
				<view class="m">
					<view class="mt">
						领积分
					</view>
					<view class="mb">
						恭喜获得<text style="color: #DE5A02;">10</text>积分
					</view>
				</view>
				<view class="r" @click="addIntegral" :class="get_integral?'get':''">
					{{get_integral?'已领取':'立即领取'}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				id: '',
				get_integral: false
			}
		},
		onLoad(options) {
			this.id = options.id
		},
		methods: {
			backHome() {

				uni.switchTab({
					url: '/pages/home/home'
				})
			},
			//领取积分
			addIntegral() {
				if (this.get_integral) {
					return
				}
				let that = this

				this.$request.post({
					url: 'orderAppraise/addIntegral',
					data: {
						id: this.id
					}
				}).then(res => {
					that.get_integral = true
					uni.showToast({
						title: '领取成功',
						duration: 2000,
						icon: 'none'
					});
				}, ret => {
					uni.showToast({
						title: ret.errmsg,
						duration: 2000,
						icon: 'none'
					});

				})


			}

		}

	}
</script>

<style>
	page {
		height: 100%;
	}

	.order_assess_success_page {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.order_assess_success_page view {
		line-height: normal;
	}

	.order_assess_success_page .page_head {
		height: 370upx;
		background: linear-gradient(to bottom, #FF7D00, #FD5300);
	}

	.order_assess_success_page .page_head .t {
		font-size: 44upx;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: 82upx;
	}

	.order_assess_success_page .page_head .t icon {
		margin-right: 10upx;
	}

	.order_assess_success_page .page_head .m {
		font-size: 26upx;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 32upx;
	}

	.order_assess_success_page .page_head .b {
		width: 180upx;
		height: 58upx;
		border-radius: 29upx;
		border: 1upx solid rgba(255, 255, 255, 1);
		display: block;
		margin: 46upx auto;
		line-height: 58upx;
		text-align: center;
		color: #fff;
		font-size: 26upx;
	}

	.order_assess_success_page .page_bottom {
		flex: 1;
		background: #F5F5F5;
	}

	.order_assess_success_page .page_bottom .integral {
		width: 686upx;
		height: 176upx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0upx 4upx 20upx 0upx rgba(0, 0, 0, 0);
		border-radius: 16upx;
		margin: 32upx auto;
		display: flex;
		align-items: center;
	}

	.order_assess_success_page .page_bottom .integral image {
		width: 140upx;
		margin-left: 28upx;
		margin-right: 18upx;
	}

	.order_assess_success_page .page_bottom .integral .m {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.order_assess_success_page .page_bottom .integral .m .mt {
		font-size: 30upx;
		color: #333;
	}

	.order_assess_success_page .page_bottom .integral .m .mb {
		font-size: 26upx;
		color: #A3A3A3;
		margin-top: 12upx;
	}

	.order_assess_success_page .page_bottom .integral .r {
		width: 152upx;
		height: 56upx;
		border-radius: 29upx;
		border: 1upx solid rgba(222, 90, 2, 1);
		color: #DE5A02;
		line-height: 56upx;
		text-align: center;
		font-size: 24upx;
		margin-right: 42upx;
	}

	.order_assess_success_page .page_bottom .integral .r.get {
		background: rgba(221, 221, 221, 1);
		border: 1upx solid rgba(221, 221, 221, 1);
		color: #fff;
	}
</style>
